<template>
  <div class="deposit-container">
    <div class="page-header">
      <h2>存款</h2>
    </div>

    <div class="deposit-layout">
      <!-- Form Column -->
      <div class="form-column">
        <div class="deposit-card">
          <h3 class="card-title">存款信息</h3>
          <div class="form-group">
            <label for="cardSelect">存入银行卡</label>
            <select id="cardSelect" v-model="formData.cardID" required>
              <option disabled value="">请选择您要存入的银行卡</option>
              <option v-for="card in userCards" :key="card.cardID" :value="card.cardID">
                {{ card.cardID }}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="depositAmount">存款金额</label>
            <div class="amount-input">
              <span class="currency-symbol">¥</span>
              <input
                id="depositAmount"
                v-model.number="formData.money"
                type="number"
                placeholder="0.00"
                min="0.01"
                step="0.01"
              />
            </div>
            <div class="quick-amounts">
              <button 
                v-for="amount in quickAmounts"
                :key="amount" 
                @click="selectAmount(amount)"
                :class="{ active: depositAmount === amount }"
              >
                {{ amount }}
              </button>
            </div>
            <div class="error-message" v-if="amountError">{{ amountError }}</div>
          </div>
          
          <div class="form-group">
            <label for="cardPassword">交易密码</label>
            <div class="password-input">
              <input 
                id="cardPassword"
                :type="showPassword ? 'text' : 'password'" 
                v-model="formData.pass"
                required 
                placeholder="请输入6位数字密码"
                maxlength="6"
              />
              <button type="button" @click="showPassword = !showPassword" class="toggle-password">
                <span v-if="showPassword">🙈</span>
                <span v-else>👁️</span>
              </button>
            </div>
          </div>
          
          <button @click="confirmDeposit" class="confirm-btn">
            下一步
          </button>
        </div>
      </div>
      
      <!-- Info Column -->
      <div class="info-column">
        <div class="info-card">
          <h4 class="card-title"><span class="icon">💡</span> 温馨提示</h4>
          <ul>
            <li>请仔细核对存入的银行卡号，资金一旦存入将无法撤回。</li>
            <li>单笔存款金额最高为 100,000 元。</li>
            <li>存款交易受银行监管，请确保资金来源合法。</li>
            <li>请在安全的网络环境下操作，切勿泄露您的密码。</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Success Modal -->
    <div v-if="showSuccess" class="success-modal">
      <div class="success-content">
        <div class="success-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"/></svg>
        </div>
        <h3>交易成功</h3>
        <p class="success-amount">¥{{ formatCurrency(this.formData.money) }}</p>
        <div class="success-details">
          <div class="detail-item">
            <span class="label">收款账户</span>
            <span class="value">{{this.formData.cardID}}</span>
          </div>
          <div class="detail-item">
            <span class="label">交易时间</span>
            <span class="value">{{ transactionTime }}</span>
          </div>
        </div>
        <button @click="closeSuccess" class="close-btn">完成</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'DepositOperation',
  props: {
    userInfo: {
      type: Object,
      required: true
    },
    userCards: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formData: {
        cardID: "",
        money: 0.00,
        pass: ""
      },
      depositAmount: '',
      depositType: 'cash',
      amountError: '',
      showSuccess: false,
      transactionTime: '',
      lastDepositedAmount: 0,
      quickAmounts: [100, 500, 1000, 2000, 5000, 10000],
      selectedCard: '',
      cardPassword: '',
      showPassword: false
    };
  },
  computed: {
    isValid() {
      return this.depositAmount && !this.amountError && parseFloat(this.depositAmount) > 0 && this.selectedCard && this.cardPassword.length === 6;
    },
    newBalance() {
      if (!this.depositAmount || this.amountError) return this.userInfo.balance;
      return this.userInfo.balance + parseFloat(this.depositAmount);
    }
  },
  methods: {
    formatCurrency(amount) {
      return parseFloat(amount).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
    },
    formatCardNumber(cardNumber) {
      if (!cardNumber) return '';
      return cardNumber.replace(/(\d{4})(?=\d)/g, '$1 ');
    },
    validateAmount() {
      const amount = parseFloat(this.depositAmount);
      if (isNaN(amount) || !this.depositAmount) {
        this.amountError = '';
        return;
      }
      if (amount <= 0) {
        this.amountError = '请输入有效的存款金额';
      } else if (amount > 100000) {
        this.amountError = '单次存款金额不能超过10万元';
      } else {
        this.amountError = '';
      }
    },
    selectAmount(amount) {
      this.formData.money = amount.toString();
      this.validateAmount();
    },
    getDepositTypeName(type) {
      const types = {
        cash: '现金存款',
        check: '支票存款',
        transfer: '转账存款'
      };
      return types[type] || type;
    },
    confirmDeposit() {
      console.log(this.formData)

      axios.post(
          'http://localhost:8057/trade/saveMoney', this.formData
      ).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.msg)
          this.transactionTime = new Date().toLocaleString('zh-CN');
          this.lastDepositedAmount = parseFloat(this.depositAmount);

          this.$emit('update-balance', parseFloat(this.depositAmount));

          this.showSuccess = true;
        }else {
          console.log(res.data.msg)
          alert(res.data.msg)
        }
      })
    },
    resetForm() {
      this.depositAmount = '';
      this.depositType = 'cash';
      this.depositRemark = '';
      this.amountError = '';
      this.selectedCard = '';
      this.cardPassword = '';
      this.showPassword = false;
    },
    closeSuccess() {
      this.showSuccess = false;
      this.resetForm();
    }
  }
}
</script>

<style scoped>
.deposit-container {
  max-width: 960px;
  margin: 24px auto;
  padding: 0 16px;
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  text-align: left;
  margin-bottom: 24px;
}
.page-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #0d6efd;
}
.page-header p {
  font-size: 14px;
  color: #5a6e78;
}

.deposit-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: flex-start;
}

.deposit-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #e9ecef;
  border-top: 4px solid #0d6efd;
}

.deposit-card .card-title {
  color: #0d6efd;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #343a40;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
textarea {
  resize: vertical;
  min-height: 70px;
}

.amount-input {
  position: relative;
}
.amount-input .currency-symbol {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  font-size: 18px;
  color: #495057;
}
.amount-input input {
  padding-left: 32px;
  font-size: 20px;
  font-weight: 500;
}

.quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.quick-amounts button {
  padding: 2px 10px;
  border: 1px solid #ced4da;
  background-color: #f8f9fa;
  color: #495057;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.quick-amounts button:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}
.quick-amounts button.active {
  background-color: #0d6efd;
  color: #ffffff;
  border-color: #0d6efd;
  font-weight: 500;
}

.password-input {
  position: relative;
}
.password-input input {
  padding-right: 40px;
}
.toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-message {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

.confirm-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background-color: #0d6efd;
  color: white;
  transition: background-color 0.2s;
}
.confirm-btn:hover:not(:disabled) {
  background-color: #0b5ed7;
}
.confirm-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.65;
}

.info-column .info-card {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #cce3ff;
}
.info-card h4 {
  font-size: 16px;
  font-weight: 500;
  color: #0d6efd;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
}
.info-card .icon {
  margin-right: 8px;
  color: #0d6efd;
}
.info-card ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #5a6e78;
}
.info-card li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
}
.info-card li:last-child {
  margin-bottom: 0;
}
.info-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #0d6efd;
  font-weight: bold;
}

/* Success Modal */
.success-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s;
}
.success-content {
  background-color: white;
  border-radius: 8px;
  padding: 32px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  animation: modal-pop 0.3s ease-out forwards;
}
@keyframes modal-pop {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.success-icon {
  color: #198754;
  margin-bottom: 16px;
}
.success-content h3 {
  font-size: 20px;
  font-weight: 500;
  color: #343a40;
  margin: 0 0 8px 0;
}
.success-amount {
  font-size: 28px;
  font-weight: 600;
  color: #1d2d35;
  margin: 0 0 20px 0;
}
.success-details {
  border-top: 1px solid #e9ecef;
  margin: 20px 0;
  padding-top: 20px;
}
.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}
.detail-item .label { color: #6c757d; }
.detail-item .value { color: #343a40; font-weight: 500; }

.close-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid #0d6efd;
  border-radius: 6px;
  background-color: #0d6efd;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.close-btn:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

@media (max-width: 768px) {
  .deposit-layout {
    grid-template-columns: 1fr;
  }
  .info-column {
    order: -1; /* Move info column to top on mobile */
  }
}
</style> 